<template>
  <div class="custom-address-wrap">
    <div class="top-btn-wrap">
      <el-button icon="el-icon-plus" @click="addAddress">新建地址</el-button>
    </div>
    <div class="listTable">
      <el-table :data="tableData" class="table" stripe>
        <el-table-column v-for="(item, index) in headList" :key="index" :prop="item.prop" :label="item.label"
          :formatter="headFormatter" resizable show-overflow-tooltip v-loading="loading" />
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <!-- <flexbox v-if="!isSeas" justify="space-between"> -->
            <span v-if="scope.row.isMain == 1" class="chief" style="padding-left: 24px;padding-right: 17px;">
              <i class="el-icon-circle-check fist-icon" />主地址
            </span>
            <el-button v-else class="set-chief-btn" type="text"
              @click.native="setMainAddress(scope.row)">设为主地址</el-button>
            <el-button class="set-chief-btn" type="text" @click.native="editAddress(scope.row)">编辑</el-button>
            <el-button class="set-chief-btn" type="text" @click.native="del(scope.row)">删除</el-button>
            <!-- </flexbox> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <createAddress ref="createAddress" dialogTitle="新建地址" :customerId="customerId" @RefreshAddress="RefreshAddress" />
  </div>
</template>
  
<script>
import createAddress from '@/components/busComponents/createAddress'
import { queryAddressById, cancellationAddress, setIsMain } from "@/api/customer/customer";
export default {
  name: "customAddress",
  components: { createAddress },
  data () {
    return {
      customerId: '1',
      loading: false,
      headList: [
        { prop: "addressType", width: "200", label: "地址类型" },
        { prop: "postalCode", width: "200", label: "邮政编码" },
        { prop: "contactsName", width: "200", label: "联系人" },
        { prop: "telephone", width: "200", label: "联系方式" },
        { prop: "address", width: "200", label: "地址" },
        { prop: "remark", width: "200", label: "备注" },
      ],
      tableData: []
    };
  },
  mounted () {
    this.RefreshAddress();

  },
  methods: {
    RefreshAddress () {
      this.loading = true;
      queryAddressById(this.customerId).then(res => {
        this.tableData = res.data;

        this.loading = false;
      }).catch(error => {
        this.loading = false;

      });
    },
    setMainAddress (row) {
      this.loading = true;
      var params = {
        id: row.id,
        isMain: 1
      }
      setIsMain(params).then(res => {
        this.loading = false;
        this.$message({
          type: 'success',
          message: '设置成功!'
        });
        this.RefreshAddress();
      }).catch(error => {
        this.loading = false;
      })

    },
    editAddress (row) {
      this.$refs.createAddress.showFun(row);

    },
    del (row) {
      this.$confirm("确定删除该地址吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          var params = {
            id: row.id
          }
          cancellationAddress(params).then(res => {
            this.loading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.RefreshAddress();
          }).catch(error => {
            this.loading = false;
          })

        })
        .catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    addAddress () {
      this.$refs.createAddress.showFun();
    },
    headFormatter (row, column, cellValue) {
      // 1 只读 2 读写 3 负责人
      if (column.property === 'addressType') {
        return {
          1: '办公地址',
          2: '仓储地址',
          3: '注册地址',
          4: '门店地址',
          5: '家庭地址',
          6: '其他'
        }[row[column.property]]
      }
      return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
    }
  }
};
</script>
  
<style lang="scss" scoped>
.custom-address-wrap {
  .top-btn-wrap {
    text-align: right;
    margin-bottom: 16px;
  }

  .fist-icon {
    margin-right: 3px;
    font-size: 14px;
    color: #36b37e;
  }

  .set-chief-btn {
    color: #344563;
  }
}
</style>